<template>
	<view class="serviceSearch">
		<!-- 搜索 -->
		<view class="sous">
			<u-search :show-action="true" placeholder="请输入你要搜索的服务" action-text="搜索" :clearabled="true"
				v-model="inputValue" @clear="clearValue" @custom="inpSearch" @change="esSeatch" @search="inpSearch"
				:animation="false" input-align="center"></u-search>
		</view>
		<!-- 输入框没有内容 -->
		<view class="nosearchFor" v-if="!inputValue">


			<!-- 历史搜索 -->
			<view class="lsSearch">

				<text>历史搜索</text>
				<image @click="clearLs" src="/static/删除.png" mode=""></image>
			</view>
			<!-- 历史内容 -->
			<view class="lisnr">
				<view class="itemnr">

					<u-tag v-for="(item ,index) in lsData" :text="item" :key="index" shape="circle" color="#8c8c8c"
						bgColor="#e4effd" borderColor="#e4effd" type="warning" closable @close="close2(item)"
						@click="lsjilu(item)"></u-tag>



				</view>
			</view>
			<!-- 搜索推荐 -->
			<view class="sstj">
				<text class="sst">搜索推荐</text>
				<view class="itemtj">
					<u-tag v-for="item in searchSuggestion" :key="item.id" :text="item.flName" color="#8c8c8c"
						bgColor="#e4effd" borderColor="#e8f0fd" shape="circle" @click="gotoService(item)"></u-tag>
					<!-- <u-tag text="照顾老人" color="#8c8c8c" bgColor="#e4effd" borderColor="#e4effd" shape="circle"></u-tag>
					<u-tag text="深度保洁" color="#8c8c8c" bgColor="#e4effd" borderColor="#e4effd" shape="circle"></u-tag>
					<u-tag text="热水器清洗" color="#8c8c8c" bgColor="#e4effd" borderColor="#e4effd" shape="circle"></u-tag>
					<u-tag text="钟点工" color="#8c8c8c" bgColor="#e4effd" borderColor="#e4effd" shape="circle"></u-tag>
					<u-tag text="白班保姆" color="#8c8c8c" bgColor="#e4effd" borderColor="#e4effd" shape="circle"></u-tag>
					<u-tag text="洗衣机清洗" color="#8c8c8c" bgColor="#e4effd" borderColor="#e4effd" shape="circle"></u-tag>
					<u-tag text="擦玻璃" color="#8c8c8c" bgColor="#e4effd" borderColor="#e4effd" shape="circle"></u-tag>
					<u-tag text="油烟机清洗" color="#8c8c8c" bgColor="#e4effd" borderColor="#e4effd" shape="circle"></u-tag> -->
				</view>
			</view>



			<!-- 热门搜索 -->
			<view class="rmss">
				<text class="rmss2">热门搜索</text>
				<view class="rmnr">
					<view class="itemrm" v-for="(item,index) in searchSuggestion2" :key="item.id"
						@click="gotoService2(item)">
						<u-tag class="tag" :bgColor="getTagStyle(index)" :borderColor="getTagStyle(index)"
							color="#fff3df" size="mini" :text="index+1"></u-tag>
						<text class="rrsl">{{item.flName}}</text>
						<!-- 	<text class="pric">{{item.price[0]}}</text>
						<text class="pricc">元起</text> -->
						<u-tag class="tag" size="mini" v-if="index==0" text="热" type="error" plain></u-tag>

					</view>
					<!-- <view class="itemrm">
						<u-tag class="tag" bgColor="#f98529" borderColor="#f98529" color="#fff3df" size="mini"
							text="2"></u-tag>
						<text class="rrsl">日常保洁</text>
						<text class="pric">103</text>
						<text class="pricc">元起</text>

					</view>
					<view class="itemrm">
						<u-tag class="tag" bgColor="#f98529#f5bb40" borderColor="#f5bb40" color="#fff3df" size="mini"
							text="3"></u-tag>
						<text class="rrsl">深度清洁</text>
						<text class="pric">171</text>
						<text class="pricc">元起</text>

					</view>
					<view class="itemrm">
						<u-tag class="tag" bgColor="#f98529#f5bb40#a6a6a6" borderColor="#a6a6a6" color="#fff3df" size="mini"
							text="4"></u-tag>
						<text class="rrsl">油烟机清洗</text>
						<text class="pric">129</text>
						<text class="pricc">元/台起</text>

					</view>
					<view class="itemrm">
						<u-tag class="tag" bgColor="#f98529#f5bb40#a6a6a6#a6a6a6" borderColor="#a6a6a6" color="#fff3df" size="mini"
							text="5"></u-tag>
						<text class="rrsl">擦玻璃</text>
						<text class="pric">135</text>
						<text class="pricc">元起</text>

					</view>
					<view class="itemrm">
						<u-tag class="tag" bgColor="#f98529#f5bb40#a6a6a6#a6a6a6#a6a6a6" borderColor="#a6a6a6" color="#fff3df" size="mini"
							text="6"></u-tag>
						<text class="rrsl">洗衣机清洗</text>
						<text class="pric">120</text>
						<text class="pricc">元/台起</text>

					</view>
					<view class="itemrm">
						<u-tag class="tag" bgColor="#f98529#f5bb40#a6a6a6#a6a6a6#a6a6a6#a6a6a6" borderColor="#a6a6a6" color="#fff3df" size="mini"
							text="7"></u-tag>
						<text class="rrsl">管道疏通</text>
						<text class="pric">9.9</text>
						<text class="pricc">元/次起</text>

					</view> -->






				</view>



			</view>


		</view>
		<view class="searchFor" v-else>
			<view class="lxnr" v-if="inputValue">
				<!-- aa -->

				<view class="lxnritem" v-for="item in dataList" :key="item.id" @click="gotoGoods(item)">
					<u-icon size="25px" name="search"></u-icon>
					<view class="suiji">

						<rich-text :nodes="item.serviceName" style="margin-left: 50px;"></rich-text>
						<rich-text :nodes="item.remark" style="margin-left: 50px;"></rich-text>

					</view>

				</view>
				<!-- <view class="lxnritem">
					<u-icon size="25px" name="search"></u-icon>
					<text>fssf放松放松发生发顺丰</text>
				</view>
				<view class="lxnritem">
					<u-icon size="25px" name="search"></u-icon>
					<text>fssf放松放松发生发顺丰</text>
				</view>
				<view class="lxnritem">
					<u-icon size="25px" name="search"></u-icon>
					<text>fssf放松放松发生发顺丰</text>
				</view>
				<view class="lxnritem">
					<u-icon size="25px" name="search"></u-icon>
					<text>fssf放松放松发生发顺丰</text>
				</view> -->



			</view>
			<view class="lxnnr" v-else>
				<text>未找到相关服务，换个说法试试吧</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				html: `<font style='color:red' class='classTest'>hello world</font>`,
				close22: true, //标签的关闭和启动
				inputValue: "",
				lxnr: true, //模拟是否能够联想到数据
				dataList: [],
				searchSuggestion: [],
				searchSuggestion2: [],
				lsData: []

			}
		},
		computed: {
			// 从本地存储获取历史记录
			// historyList() {
			// 	const history = uni.getStorageSync('lishi'); // 获取本地存储中的历史记录
			// 	return history ? history : []; // 如果没有数据，返回空数组
			// }
		},
		mounted() {

		},
		onShow() {
			this.lsData = uni.getStorageSync('lishi')
		},
		onLoad() {
			this.$http.get('/es/searchRecommend').then(res => {
				console.log('res', res);
				if (res.code == 200) {
					this.searchSuggestion = res.result
				}
			})
			this.$http.get('/es/hot').then(res => {
				console.log('res', res);
				if (res.code == 200) {
					this.searchSuggestion2 = res.result
				}
			})


		},
		methods: {
			historyList() {
				const history = uni.getStorageSync('lishi'); // 获取本地存储中的历史记录
				return history ? history : []; // 如果没有数据，返回空数组
			},
			tjls(e) {
				let history = uni.getStorageSync('lishi'); // 获取本地存储中的历史记录
				if (!history) {
					history = []; // 如果没有历史记录，则初始化为空数组
				}
				const index = history.indexOf(e);
				if (index !== -1) {
					// 如果存在，先移除原来的记录
					history.splice(index, 1);
				}

				// 添加新项到数组的最前面
				history.unshift(e);

				// 将更新后的历史记录存储到本地
				uni.setStorageSync('lishi', history);
			},
			close2(e) {
				let history = uni.getStorageSync('lishi'); // 获取本地存储中的历史记录
				if (!history) {
					history = []; // 如果没有历史记录，则初始化为空数组
				}
				console.log("搜索", e);
				const index = history.indexOf(e);

				if (index !== -1) {
					// 如果存在，先移除原来的记录
					history.splice(index, 1);
				}

				// 添加新项到数组的最前面
				// history.unshift(e);
				this.lsData = history
				// 将更新后的历史记录存储到本地
				uni.setStorageSync('lishi', history);
			},
			lsjilu(e) {
				console.log("历史", e);
				this.tjls(e)
				// console.log(value);
				uni.showLoading({
					title: '加载中'
				});
				this.$http.post("/es/search?name=" + e).then(res => {
					console.log("搜索成功", res);
					uni.hideLoading();
					this.$toPage("/otherPage/personnelList/personnelList", 'arrayData', JSON.stringify(res.result))
				})
			},
			getTagStyle(index) {
				// 你可以根据 index 的值来返回不同的背景颜色
				const colors = ['#ff7251', '#f98529', '#f5bb40', '#b1b1b1', '#b0b0b0', '#cecece', '#e3e3e3']; // 设置不同的颜色
				return colors[index] // 根据索引循环颜色

			},
			gotoService(e) {
				this.$toPage("/otherPage/personnelList/personnelList", "id", e.id)
			},
			gotoService2(e) {
				this.$toPage("/otherPage/personnelList/personnelList", "id", e.id)
			},
			gotoGoods(e) {
				console.log(e);
				this.tjls(this.inputValue)
				this.$toPage("/components/goods/goods", "id", e.id)
			},

			esSeatch(e) { //调用es搜索

				uni.showLoading({
					title: '加载中'
				});
				clearTimeout(this.timer);
				// this.status = "loading"
				// 设置一个新的定时器，1秒后执行 esSeatch
				this.timer = setTimeout(() => {
					console.log(e);
					this.$http.post("/es/search?name=" + e).then(res => {
						console.log("搜索成功2", res);
						uni.hideLoading();
						this.dataList = res.result
						// this.status = "noMore"
					})
				}, 500); // 1秒延迟
			},
			inpSearch(value) {
				console.log("dj");
				this.tjls(this.inputValue)
				console.log(value);
				uni.showLoading({
					title: '加载中'
				});
				this.$http.post("/es/search?name=" + value).then(res => {
					console.log("搜索成功", res);
					uni.hideLoading();
					this.$toPage("/otherPage/personnelList/personnelList", 'arrayData', JSON.stringify(res.result))
				})
			},
			clearValue() {
				// this.inputValue=""
				console.log(this.inputValue);
			},
			clearLs() {
				console.log("清空历史");
				this.lsData = []
				uni.removeStorageSync("lishi")
			}
		}
	}
</script>

<style lang="less">
	.serviceSearch {
		// background-color: #d5d5d5;

		.sous {
			// background-color: aqua;
		}

		.nosearchFor {
			.lsSearch {
				margin-top: 8px;
				padding: 8px;
				display: flex;
				justify-content: space-between;

				text {
					font-size: 20px;
					font-weight: bold;
				}

				image {
					width: 16px;
					height: 16px;
				}

			}

			// 历史内容
			.lisnr {
				.itemnr {
					// background-color: aquamarine;
					// padding: 0 21px;
					padding-left: 12px;
					display: flex;
					// justify-content: start;
					flex-wrap: wrap;
					/* 允许换行 */
					gap: 10px;
					/* 标签之间的间距 */

				}
			}

			// 搜索推荐
			.sstj {
				margin-top: 4px;

				.sst {
					font-size: 20px;
					font-weight: bold;
					margin: 8px;
				}

				.itemtj {
					display: flex;
					flex-wrap: wrap;
					/* 允许换行 */
					gap: 20px;
					font-size: 12px;
					font-weight: 300;
					margin-top: 8px;
					padding-left: 12px;
				}
			}

			// 热门搜索
			.rmss {
				margin-top: 38px;
				// background-color: #fbf2de;
				width: 100%;
				height: 150px;

				.rmss2 {
					font-size: 20px;
					font-weight: bold;
					margin: 10px;
				}

				.rmnr {
					padding: 12px;
					margin-bottom: 15px;

					.itemrm {
						margin-top: 8px;
						display: flex;
						align-items: center;

						.rrsl {
							margin: 0 5px;
							font-size: 15px;
							font-weight: bold;
						}

						.pric {
							font-size: 12px;
							color: #ff7e73;
						}

						.pricc {
							font-size: 12px;
							color: #a18080;
							margin-right: 5px;
						}



					}

				}
			}

		}

		.searchFor {
			background-color: #ffffff;

			.lxnr {
				.lxnritem {
					display: flex;
					align-items: center;
					// justify-content: space-between;
					// justify-content: space-around;
					padding: 10px 35px;

					text {
						margin-left: 8px;
						// width: 50px;
						/* 设置宽度 */
						// white-space: nowrap;
						// /* 防止文本换行 */
						// overflow: hidden;
						// /* 超出内容隐藏 */
						// text-overflow: ellipsis;
						/* 超出部分显示为省略号 */
					}

					.suiji {
						display: flex;
						align-items: center;

					}
				}

			}

			.lxnnr {
				position: relative;

				text {
					position: absolute;
					font-size: 20px;
					padding: 0 35px;
					margin-top: 35px;
				}
			}
		}
	}
</style>